<?php
include_once('../global.php');
$show = $_GET['show'];
$roundtext = array(
  1 => '第一轮',
  2 => '第二轮',
  3 => '决赛轮',
  4 => '',
);

$user_id = $_SESSION['user_id'];
if (empty($user_id)) {//登录操作
  $_SESSION['redirect_url'] = $_SERVER['REQUEST_URI'];
  header('Location: /bmwjunior/mobile/login.php');

  // 停止脚本执行
  exit;

}
//判断是否到时间
$end_time=strtotime("2024-12-06 16:00");
if(time()>$end_time){
    echo "<script>alert('预约已结束');history.go(-1);;</script>";
    exit;
}
//判断球员是否锦标赛
$sql = "SELECT * FROM match_player mp  WHERE mp_player_id='{$user_id}' and mp_match=4579 and mp.mp_club=567";
$res = $db->SelectSQL($sql);
if(empty($res)){//非锦标赛的球员 返回到首页
    header('Location: /bmwjunior/mobile/main.php');
//    echo "<script>alert('锦标赛的球员可以预约');history.go(-1);;</script>";
   exit;
}
////获取分组id
$mp_class=$res[0]['mp_class'];
$sql = "SELECT * FROM gp_manage   WHERE id='{$mp_class}' and mt_id=4579 and club_id=567";
$res = $db->SelectSQL($sql);
//AB组 是 利百特球场
//C组 是 诺曼球场
$court_id=1; //AB组
$court_name="东莞观澜湖利百特球场"; //AB组
$dong_name="1号洞开球"; //AB组
$group_name=$res[0]['name'];
if (strpos($group_name, "C") !== false) {
    $court_id=2;
    $court_name="东莞观澜湖诺曼球场";
}
//获取预约时间
$sql = "SELECT * FROM bmw_court_order_time   WHERE court_id='{$court_id}'";
$rdate_list = $db->SelectSQL($sql);
$rdate_data=[];
foreach ($rdate_list as $val){
    $r_data=[
        'time'=>substr($val['time'], 0, 5),
        'time_id'=>$val['id'],
        'slots'=>getslot($val['order_num'])
    ];
    if($val['date']=="2024-12-09"){
        $rdate_data['2024-12-09'][]=$r_data;
    }
    if($val['date']=="2024-12-10"){
        $rdate_data['2024-12-10'][]=$r_data;
    }
}
$rdate_data_json=json_encode($rdate_data);


?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=GB2312">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="<?php echo CSS_PATH ?>index.css" rel="stylesheet" type="text/css">
  <script type="text/javascript" src="<?php echo JS_PATH ?>jquery-1.8.3.min.js"></script>
  <script type="text/javascript" src="<?php echo JS_PATH ?>main.js"></script>
  <title>预约试场-<?php echo $match_cn_name ?></title>

  <style>
    /* 样式优化 */
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
      background-color: #0d2a35;
      color: white;
      display: flex;
      align-items: center;
      height: 100vh;
      overflow: hidden;
      flex-direction: column;
    }

    .index_news {
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      overflow-y: auto;
      /* 滑动效果 */
      height: calc(100vh - 15rem);
      /* 限制最大高度为视口高度减去顶部区域的高度 */
      scrollbar-width: thin;
      /* Firefox: 设置滚动条宽度 */
      scrollbar-color: #205763 #0d2a35;
      /* 滚动条颜色 */

    }


    .title {
      text-align: center;
      margin-bottom: 20px;
    }

    .date-switch {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    .date-switch button {
      flex: 1;
      padding: 15px;
      border: none;
      border-radius: 5px;
      margin: 0 5px;
      cursor: pointer;
      background: #e0e0e0;
      color: #333;
      font-size: 20px;
      font-family: "poppin";
    }

    .date-switch button.active {
      background: #007bff;
      color: #fff;
    }

    #time-slot-list {
      margin-bottom: 20px;
    }

    .row {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      justify-content: space-around;
    }

    .time {
      width: 100px;
      text-align: center;
      background: #fff;
      color: #333;
      padding: 10px;
      border-radius: 5px;
    }

    .slots {
      flex: 1;
      display: flex;
      justify-content: space-around;
      padding-left: 10px;
    }

    .slot-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #205763;
      padding: 10px;
      border-radius: 5px;
      cursor: pointer;
      box-sizing: border-box;
      border: 1px solid transparent;
    }

    .slot-wrapper.disabled {
      background: #ccc;
      cursor: not-allowed;
    }

    .slot-wrapper.active {
      /* background: #007bff;
       */
       border: 1px solid white;
    }

    .slot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #fff;
      display: inline-block;
      margin: 0 3px;
    }

    .slot.filled {
      background: #007bff;
    }

    .submit-button {
      width: 260px;
      height: 50px;
      margin-left: auto;
      margin-top: 10px;
      display: flex;
      justify-content: center;
      margin-right: auto;
      align-items: center;
      font-size: 22px;
      border-radius: 10px;
      border: 2px solid #fff;
      margin-bottom: 30px;
      color: #fff;
      background: transparent;
    }

    .submit-button:disabled {
      color: #ccc;
      cursor: not-allowed;
    }

    /* Webkit 浏览器滚动条样式 */
    .index_news::-webkit-scrollbar {
      width: 8px;
    }

    .index_news::-webkit-scrollbar-thumb {
      background-color: #205763;
      border-radius: 5px;
    }

    .index_news::-webkit-scrollbar-track {
      background-color: #0d2a35;
    }


    .event-card {
      background-color: #205763;
      border-radius: 10px;
      margin: 10px 0;
      padding: 15px 25px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }

    .event-card .event-info {
      flex: 1;
    }

    .event-card .event-info p {
      margin: 0;
      font-size: 16px;
      line-height: 1.5;
    }

    .event-card .event-info p:first-child {
      font-weight: bold;
    }

    #sta {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      text-align: center;
    }

    #sta img {
      width: 250px;
      height: auto;
    }


    /* Webkit 浏览器滚动条样式 */
    .index_news::-webkit-scrollbar {
      width: 8px;
    }

    .index_news::-webkit-scrollbar-thumb {
      background-color: #205763;
      border-radius: 5px;
    }

    .index_news::-webkit-scrollbar-track {
      background-color: #0d2a35;
    }

    .event-card {
      background-color: #2F6064;
      border-radius: 10px;
      margin: 10px 0;
      padding: 15px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      color: #fff;
    }

    .event-card .title {
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      margin-bottom: 10px;
    }

    .event-card .detail {
      font-size: 14px;
      color: #fff;
      line-height: 1.8;
    }
  </style>
</head>

<body>
  <div id="sta">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
      <tbody>
        <tr>
          <td style="text-align:center;"><img src="./images/000.png" style="width:350px;height:80px" /></td>
          <!-- 右上角语言切换按钮 -->
					<div style="position: fixed; top: 30px; right: 10px; z-index: 1000;">
						<form method="get" style="margin: 0;">
							<button type="submit" name="lang" value="<?php echo $lang === 'CN' ? 'en' : 'CN'; ?>"
								style="background-color: transparent; color: #fff; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; font-size:20px">
								<?php echo $lang === 'CN' ? 'EN' : 'CN'; ?>
							</button>
						</form>
					</div>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="index_news poppin">
    <h3 class="title"><?php echo $court_name;?>预约试场</h3>
    <p style="text-align:center; font-size:16px; margin-bottom:10px;" id="dong_name_id">1号洞开球</p>

    <!-- 日期切换 -->
    <div class="date-switch">
      <button class="active" onclick="switchDate('2024-12-09')">2024-12-09</button>
      <button onclick="switchDate('2024-12-10')">2024-12-10</button>
    </div>
    <!-- 时间和场次 -->
    <div id="time-slot-list"></div>
    <form id="myForm" action="succuss_exercise.php" method="post">
      <input type="hidden" name="order_time_id" id="time_id" value="0">
      <input type="hidden" name="order_date" id="order_date" value="2024-12-09">
      <input type="hidden" name="user_id" id="user_id" value="<?php echo $user_id; ?>">
    </form>
    <!-- 提交按钮 -->
  </div>

  <button class="submit-button <?php echo $css_class; ?>" id="submit-btn" onclick="submitReservation()" disabled><?php echo t('submit_reservation'); ?></button>


  <div class="bottommenu">
  <div class="<?php echo $css_class; ?>" onclick="gotomain()"><?php echo t('back'); ?></div>    <div class="<?php echo $css_class; ?>" onclick="gotomain()"><?php echo t('home_page'); ?></div>  </div>

</body>

<script>
    var court_id='<?php echo $court_id;?>';
  // 模拟数据
  const data = <?php echo $rdate_data_json;?>;
  let selectedDate = '2024-12-09';
  let selectedSlot = null;

  function switchDate(date) {
    selectedDate = date;
    if(selectedDate=="2024-12-10" && court_id==1){
        $("#dong_name_id").text("8:00 18洞同时开球");
    }else {
        $("#dong_name_id").text("1号洞开球");
    }
    document.querySelectorAll('.date-switch button').forEach((btn) => {
      btn.classList.toggle('active', btn.innerText === date);
    });
    renderTimeSlots();
  }

  function renderTimeSlots() {
    const container = document.getElementById('time-slot-list');
    container.innerHTML = ''; // 清空

    // 确保每次重新渲染时，清空选择
    selectedSlot = null; // 重置为未选择
    document.getElementById('submit-btn').disabled = true; // 禁用提交按钮

    data[selectedDate].forEach((row, rowIndex) => {
        const rowDiv = document.createElement('div');
        rowDiv.className = 'row';

        const timeDiv = document.createElement('div');
        timeDiv.className = 'time';
        timeDiv.innerText = row.time; // 显示时间或编号
        rowDiv.appendChild(timeDiv);

        const slotsDiv = document.createElement('div');
        slotsDiv.className = 'slot-wrapper';

        // 判断是否可选
        const allFilled = row.slots.every((slot) => slot === 1); // 全部为1表示已满
        if (allFilled) {
            slotsDiv.classList.add('disabled'); // 添加不可选样式
        } else {
            slotsDiv.onclick = () => selectSlot(rowIndex); // 可选时添加点击事件
        }

        // 渲染每组的圆点
        row.slots.forEach((slot) => {
            const slotDiv = document.createElement('div');
            slotDiv.className = `slot ${slot === 1 ? 'filled' : ''}`; // `1` 表示已被预约，填充颜色
            slotsDiv.appendChild(slotDiv);
        });

        rowDiv.appendChild(slotsDiv);
        container.appendChild(rowDiv);
    });
}

  function selectSlot(rowIndex) {
    const selectedRow = data[selectedDate][rowIndex];
    const allFilled = selectedRow.slots.every((slot) => slot === 1);

    if (allFilled) {
        alert('该时间段已满，无法选择！');
        return;
    }

    selectedSlot = rowIndex;
    $("#time_id").val(selectedRow.time_id);
    $("#order_date").val(selectedDate);
    // 移除其他选中的状态
    document.querySelectorAll('.slot-wrapper').forEach((wrapper) => wrapper.classList.remove('active'));

    // 高亮当前选中的框
    const wrappers = document.querySelectorAll('.slot-wrapper');
    wrappers[rowIndex].classList.add('active');

    // 启用提交按钮
    document.getElementById('submit-btn').disabled = false;
}

function submitReservation() {
    if (selectedSlot === null) {
        alert('请选择一个时间和场地！');
        return;
    }
    const time = data[selectedDate][selectedSlot].time;
    //alert(`预约成功！\n日期：${selectedDate}\n时间：${time}`);
    document.getElementById('myForm').submit();
}

  // 初始化
  renderTimeSlots();
  function goback() {
    window.history.back();
  }


  function gotomain() {
    window.location = './main.php';
  }
</script>

</html>